import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Row,
  Col,
  Table,
  Switch,
  Checkbox,
  Space,
  message,
  Select,
  Radio,
  InputNumber,
} from "antd";
import {
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
  useEffect,
} from "react";
import styles from "./styles.less";
const { TextArea } = Input;
import { namespace } from "./configFile";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

export default forwardRef((props, ref) => {
  const { dispatch, roles } = props;
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();
  const [titleType, setTitleType] = useState(0);

  const onChange = ({ enableStatus, id }) => {
    dispatch({
      type: `${namespace}/queryChange`,
      params: {
        enableStatus: enableStatus === 1 ? 0 : 1,
        id,
      },
    });
  };

  const onDelete = (id) => {
    dispatch({
      type: `${namespace}/queryDelete`,
      params: {
        id,
      },
    });
  };

  const submitForm = async () => {
    const params = await form.validateFields();
    // let rangeSets = [...params.rangeSets]
    let rangeSets = params.rangeSets.map((range) => {
      let { start, end, commissionMethod, value } = range;
      return {
        saleRange: start + "-" + end,
        commissionMethod,
        value,
      };
    });
    props.submitForm({
      ...params,
      applyRoleIds: params.applyRoleIds.toString(),
      rangeSets: JSON.stringify(rangeSets),
    });
  };

  useImperativeHandle(ref, () => ({
    setOpen,
    form,
    setTitleType,
  }));

  return (
    <Modal
      open={open}
      title={titleType ? "编辑方案" : "新增方案"}
      forceRender
      width={800}
      onCancel={() => {
        form.resetFields();
        setOpen(false);
      }}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button type="primary" onClick={submitForm}>
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 3 }}>
        <Row gutter={8}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Col span={24}>
            <Form.Item
              label="方案名称"
              name="planName"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          </Col>

          <Col span={24}>
            <Form.Item
              label="适用角色"
              name="applyRoleIds"
              rules={[{ required: true }]}
            >
              <Checkbox.Group>
                {roles.map((v) => (
                  <Checkbox value={v.roleId}>{v.roleName}</Checkbox>
                ))}
              </Checkbox.Group>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="计算方式"
              name="countMethod"
              rules={[{ required: true }]}
            >
              <Radio.Group>
                <Radio value="1">阶梯式提成</Radio>
                <Radio value="2">阶段式提成</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="计算周期"
              name="countCycle"
              rules={[{ required: true }]}
            >
              <Radio.Group>
                <Radio value="1">按月度</Radio>
                <Radio value="2">按季度</Radio>
                <Radio value="3">按年度</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={8} style={{ textAlign: "center" }}>
            销售额区间
          </Col>
          <Col span={5} style={{ textAlign: "center" }}>
            提成方式
          </Col>
          <Col span={4} style={{ textAlign: "center" }}>
            提点
          </Col>
          <Form.List name={"rangeSets"}>
            {(fields, { add, remove }, { errors }) => (
              <>
                {fields.map((field, index) => (
                  <Row style={{ marginBottom: 10 }} gutter={16}>
                    <Col span={4}>
                      <Form.Item
                        {...field}
                        name={[field.name, "start"]}
                        rules={[
                          {
                            required: true,
                            message: "请填写金额",
                          },
                        ]}
                        noStyle
                      >
                        <Input placeholder="请输入金额" />
                      </Form.Item>
                    </Col>
                    <Col span={1}> 至 </Col>
                    <Col span={4}>
                      <Form.Item
                        {...field}
                        name={[field.name, "end"]}
                        rules={[
                          {
                            required: true,
                            message: "请填写金额",
                          },
                        ]}
                        noStyle
                      >
                        <Input placeholder="请输入金额" />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        {...field}
                        name={[field.name, "commissionMethod"]}
                        rules={[
                          {
                            required: true,
                            message: "请选择提成方式",
                          },
                        ]}
                        noStyle
                      >
                        <Select placeholder="请选择提成方式">
                          <Select.Option value={"1"}>按比例</Select.Option>
                          <Select.Option value={"2"}>固定金额</Select.Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={4}>
                      <Form.Item
                        {...field}
                        name={[field.name, "value"]}
                        rules={[
                          {
                            required: true,
                            message: "请选择作业时间段",
                          },
                        ]}
                        noStyle
                      >
                        <InputNumber min={0} placeholder="请输入"></InputNumber>
                      </Form.Item>
                    </Col>
                    <Col span={1}>
                      {
                        <MinusCircleOutlined
                          className={styles.dynamic}
                          onClick={() => remove(field.name)}
                        />
                      }
                    </Col>
                  </Row>
                ))}
                <Button
                  type="dashed"
                  onClick={add}
                  icon={<PlusOutlined />}
                  style={{ width: "100%", marginTop: 10 }}
                >
                  区间
                </Button>
              </>
            )}
          </Form.List>
        </Row>
      </Form>
    </Modal>
  );
});

// export default Dom
